<template>
  <Card class="op-detail-box" title="供需信息">
    <div class="descriptions-box">
      <Descriptions :column="1">
        <template #title>
          <div>
            <span style="margin-right: 10px">基础信息</span>
            <Button type="primary" ghost @click="open = true">详细信息</Button>
          </div>
        </template>
        <DescriptionsItem label="供需标题">{{ data?.title }}</DescriptionsItem>
        <DescriptionsItem label="合作类型">
          {{ dictionary.boType.find((item) => item.dictValue === data?.boType)?.dictLabel }}
        </DescriptionsItem>
        <DescriptionsItem label="归属行业">{{ data?.industryCategoryNames }}</DescriptionsItem>
        <DescriptionsItem label="合作地区">
          <template v-if="data?.provinceName">
            {{ data?.provinceName }}-{{ data?.cityName }}
          </template>
          <template v-else>不限 </template>
        </DescriptionsItem>
        <DescriptionsItem label="可合作期限">
          <template
            v-if="data?.cooperationDurationType === CooperationDurationTypeEnum.LimitedDate"
          >
            {{ data?.cooperationDatetime }}前
          </template>
          <template v-else>长期有效</template>
        </DescriptionsItem>
      </Descriptions>
      <Descriptions title="发布者信息" :column="1">
        <DescriptionsItem label="发布者">{{ data?.userName }}</DescriptionsItem>
        <DescriptionsItem label="所在单位">{{ data?.companyName }}</DescriptionsItem>
        <DescriptionsItem label="单位职务">{{ data?.companyPosition }}</DescriptionsItem>
        <DescriptionsItem label="归属组织">{{ data?.orgName }}</DescriptionsItem>
        <DescriptionsItem label="会员身份">{{ data?.memberLevelName }}</DescriptionsItem>
      </Descriptions>
      <Descriptions title="其它信息" :column="1">
        <DescriptionsItem label="供需服务专员">{{ data?.sysUserName }}</DescriptionsItem>
        <!-- <DescriptionsItem label="供需编号">1810000000</DescriptionsItem> -->
        <DescriptionsItem label="供需状态">
          <Tag :color="boStatus?.dictType">
            {{ boStatus?.dictLabel }}
          </Tag>
        </DescriptionsItem>
      </Descriptions>
    </div>
  </Card>
  <Modal v-model:visible="open" title="供需详情" :footer="null" width="800px">
    <div style="background-color: #f7f8fa; padding: 20px; height: 600px; overflow: auto">
      <Card
        v-if="opDetailData?.incentiveOpen === IncentiveOpenEnum.Yes"
        title="撮合激励"
        :headStyle="{ color: '#F53F3F', fontWeight: 'bold' }"
        :body-style="{ color: '#F53F3F' }"
        style="margin-bottom: 20px"
      >
        <template v-if="opDetailData?.incentiveType === IncentiveTypeEnum.Commission">
          <div>
            初始激励：预估规模{{ opDetailData.estimatedScale }}，成交佣金{{
              opDetailData.incentiveCommissionRate
            }}%
          </div>
          <div v-if="opDetailData?.promotionCommissionRate !== undefined" style="margin-top: 12px">
            分配下级：成交佣金{{ opDetailData.promotionCommissionRate }}%
          </div>
        </template>
        <template v-else>
          <div>初始说明：{{ opDetailData?.incentiveDetails }}</div>
          <div v-if="opDetailData?.distributeRemarks">
            分配下级：{{ opDetailData?.distributeRemarks }}
          </div>
        </template>
      </Card>
      <Card title="我可供应" :headStyle="{ fontWeight: 'bold' }" style="margin-bottom: 20px">
        <div
          v-for="({ moduleType, fileUrls, text }, index) in details"
          :key="index"
          style="background-color: #fff; margin-bottom: 12px"
        >
          <template v-if="moduleType == ModuleTypeEnum.LargeImage">
            <Image
              :src="fileUrls![0]"
              width="720px"
              height="210px"
              border-radius="8px"
              style="object-fit: cover"
            ></Image>
          </template>
          <div
            v-else-if="moduleType == ModuleTypeEnum.SmallImage && fileUrls"
            style="display: flex; flex-wrap: wrap; gap: 8px"
          >
            <div v-for="(url, i) in strSplit(fileUrls)" :key="i">
              <Image
                :src="url"
                border-radius="8px"
                width="110px"
                height="110px"
                style="object-fit: cover"
              ></Image>
            </div>
          </div>
          <div v-else-if="moduleType == ModuleTypeEnum.Video">
            <video id="video" :src="fileUrls![0]" muted controls></video>
          </div>
          <div v-else-if="moduleType == ModuleTypeEnum.Text" style="white-space: break-spaces">
            {{ text }}
          </div>
        </div>
      </Card>

      <Card
        v-if="opDetailData?.attachmentUrls?.length"
        title="供应内容附件"
        :headStyle="{ fontWeight: 'bold' }"
      >
        <div>
          <div
            v-for="(urlItem, i) in opDetailData?.attachmentUrls"
            :key="i"
            style="
              border-radius: 8px;
              background: #fff4e7;
              padding: 8px;
              display: flex;
              align-items: center;
              gap: 8px;
              margin-bottom: 12px;
            "
          >
            <Image
              src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/file-icon-1.png"
              width="40px"
              height="40px"
            />
            <div style="font-size: 14px; font-weight: bold; flex: 1">
              {{ strToDocFileResult(urlItem).name }}
            </div>
            <a :href="strToDocFileResult(urlItem).url" target="_blank">
              <Button type="primary" ghost style="border-radius: 12px">查看文件</Button>
            </a>
          </div>
        </div>
      </Card>
    </div>
  </Modal>
</template>

<script setup lang="ts">
  import {
    DocFileResult,
    IBusinessOpportunity,
    IBusinessOpportunityReviewList,
    IEditBusinessOpportunitiesDetailEnum,
  } from '@/api/institution/model/businessOpportunitiesManageModel';
  import { Card, Descriptions, DescriptionsItem, Button, Tag, Modal, Image } from 'ant-design-vue';
  import dictionary from '@/utils/dictionary/localDicts';
  import {
    CooperationDurationTypeEnum,
    IncentiveOpenEnum,
    IncentiveTypeEnum,
    ModuleTypeEnum,
  } from '@/enums/businessOpportunitiesEnum';
  import { computed, ref, watch } from 'vue';
  const props = defineProps({
    data: {
      type: Object as PropType<IBusinessOpportunityReviewList>,
      default: () => ({}),
    },
    detailKey: {
      type: String,
      default: 'id',
    },
    api: {
      type: Function,
      default: () => {},
    },
  });

  const boStatus = computed(() => {
    return dictionary.boStatus.find((item) => item.dictValue === props.data?.boStatus);
  });

  const strSplit = (str: string, split: string = ',') => {
    if (typeof str === 'string') {
      return str.split(split);
    } else {
      return str;
    }
  };
  const opDetailData = ref<IBusinessOpportunity>();
  const details = ref<IEditBusinessOpportunitiesDetailEnum[]>([]);

  const strToDocFileResult = (str: string) => {
    try {
      return JSON.parse(str) as DocFileResult;
    } catch (error) {
      return {
        name: '',
        url: '',
      };
    }
  };
  const queryOpDetail = async () => {
    const res = await props.api(props.data[props.detailKey]);
    opDetailData.value = res;
    details.value = JSON.parse(res.details || '[]');
    console.log(details.value);
  };

  const open = ref(false);

  watch(
    () => open.value,
    (val) => {
      if (val) {
        queryOpDetail();
      }
    },
  );
</script>
<style lang="less" scoped>
  .op-detail-box {
    width: 100%;
    .descriptions-box {
      display: flex;
    }
  }
</style>
